<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基础知识</title>
</head>
<body>


<div id="app">

</div>

<input type="text" id="inpt" value="20" >

<!--js是弱类型的脚本语言   通过浏览器的引擎 v8 解析  js  边解释 边执行

.java  ->  javac  编译  -> .class 字节码文件  ->  类加载器  jvm  执行

  js  核心内容
    1. ECMA  SCRIPT  js基础语法  es5   es11
    2. DOM  文档对象模型    节点   document
    3. BOM   浏览器对象模型

 获取节点对象的方式
    1.  根据id获取   getElementById("app");
    2.  根据节点标签   getElementsByTagName()
    3.  根据class   getElementsByClassName
    4.  根据选择器    querySelector("#app")    querySelectorAll()
-->
<script type="text/javascript">
    //  id=app  节点  内容
    let ele = document.getElementById("app");
    // let ele = document.getElementsByTagName("div");   //   伪数组
    // let ele = document.getElementsByClassName("app");   //   伪数组
    // let ele2 = document.querySelectorAll(".app");
    // console.log(ele2)
    // let ele = document.querySelector("#app");
    console.log(ele)

    // 添加内容  到  div#app  hello javascript
    // ele.innerText = '<h1>hello javascript</h1>'
    ele.innerHTML = '<h1>hello javascript</h1>'


    // 获取节点对象的内容  innerText 只能获取 节点内容  不能获取标签  innerHTML  可以识别节点中的标签
    let innerText = ele.innerText;
    console.log("text="+innerText)
    let innerHTML = ele.innerHTML;
    console.log("html = "+innerHTML)

    // 获取表单控件的值
    let inpt = document.getElementById("inpt");
    console.log(inpt)
    let value = inpt.value;
    console.log(value)
    inpt.value = 50;

</script>

</body>
</html>
